outline - style

Internet Explorer/Internet Explorer

Netscape/Netscape

Opera/Opera

Safari/Safari

Firefox/Firefox

6.0

7.0

8.0

8.0

9.0

8.0

9.2

9.5

1.3

2.0

3.1

1.5

2.0

3.0

Ні

Ні

Так

Так

Так

Так

Так

Так

Так

Так

Так

Так

Так

Так

Коротка інформація

CSS

CSS2, CSS2.1

Значення за умовчанням

none

Наслідує

Ні

Застосовується

До усіх елементів

Аналог HTML

Ні

Посилання на специфікацію

http://www.w 3.org/TR/CSS21/ui.html#propdef - outline - style

Опис

Задає стиль зовнішньої межі елементу. На відміну від лінії, що задається через border, лінія через outline відображається навколо елементу, не впливаючи на ширину блоку або його положення.

Синтаксис

outline - style: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit

Значення

none Межа не відображається. Це значення перекриває властивість outline - width, якщо воно є присутнім.

dotted Лінія складається з набору точок.

dashed Пунктирна лінія, що складається з серії коротких відрізків.

solid Суцільна лінія.

double Подвійна лінія.

groove Створює ефект втиснутої рамки.

ridge Створює ефект рельєфної межі.

nset Псевдотривимірна рамка, при якій права і нижня межа освітлюється, а ліва і верхня лінії затемняються.

outset Псевдотривимірна рамка, при якій ліва і верхяя межа мають світліший відтінок, ніж заданий колір, а права і нижня лінії затемняються.

inherit Наслідує значення батька.

Вид вказаних стилів представлений на мал. 1.

Рис. 1

Мал. 1. Вид межі з різним значенням стилів

Приклад

HTML 4.0  CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows - 1251">
    <title>outline - style</title>
    <style type="text/css">
   .   .noborder A {
        outline - style: none; /* Прибираємо межу навколо посилань */ 
      }
    </style>
  </head> 
<body> 
      <p><a href="http://ya.ru">Яндекс</a>
      <a href="http://google.ru">Google</a></p>
 
      <p class="noborder"><a href="http://ya.ru">Яндекс</a>
      <a href="http://google.ru">Google</a></p>
  </body>
</html>

Результат прикладу показаний на мал. 2. У цьому прикладі для браузеру Firefox забирається пунктирна межа навколо посилань, що виникає при їх активації. У першому абзаці рамка ще відображатиметься, а в другому абзаці вона ховається за допомогою значення none властивості outline - style.

Рис. 2

Мал. 2. Використання властивості outline - style для посилань в Firefox

Об'єктна модель

[window.]document.getElementById("elementID") style.outlineStyle